<template>
    <div class="tmpl">
        <!--利用MUI中的图文列表样式实现新闻列表-->
        <ul class="mui-table-view">
            <!--<li class="mui-table-view-cell mui-media">-->
                <!--<a href="#">-->
                    <!--<img src="../../../statics/images/menu3.png" class="mui-media-object mui-pull-left">-->
                    <!--<div class="mui-media-body">-->
                        <!--幸福-->
                        <!--<p class="mui-ellipsis">-->
                            <!--幸福：不努力争取何来幸福-->
                            <!--<span>123456点击</span>-->
                        <!--</p>-->
                    <!--</div>-->
                <!--</a>-->
            <!--</li>-->
            <li v-for="item in list" class="mui-table-view-cell mui-media">
                <router-link v-bind='{to:"/news/newInfo/" + item.id}'>
                    <img :src="item.img_url" class="mui-media-object mui-pull-left">
                    <div class="mui-media-body">
                        {{item.title}}
                        <p class="mui-ellipsis">
                            发表时间：{{item.add_time | fmtdate('YYYY-MM-DD')}}
                            <span>点击数：{{item.click}}</span>
                        </p>
                    </div>
                </router-link>
            </li>
        </ul>

    </div>
</template>

<style scoped>
    .mui-media-object{
        max-width:60px;
        width: 60px;
        height: 60px;
        line-height:60px;
    }
    .mui-ellipsis{
        display: block;
        color: #0094ff;
        font-size: 12px;
        margin-top: 20px;
    }
    .mui-ellipsis > span{
        float: right;
        margin-right: 20px;
    }

</style>

<script>
    import common from '../../kits/common.js'  //common中定义了域名，方便以后统一修改
    export default{
        data(){
            return{
                list:[]
            }
        },
        created(){
            this.getnewslist();//当前组件创建数据后即可加载数据
        },
        methods:{
            getnewslist(){
                //1.0 利用vue-resource请求到图文资讯数据列表
                //2.0 将列表数据赋值给list属性
                var url  = common.apihost + '/api/getnewslist';
                this.$http.get(url).then(
                    res=>{
                        this.list = res.body.message;
                    },
                    res=>{
                        console.log('newslist请求出错了');
                    }
                )
            }
        }
    }
</script>